<template>
  <div id="home" style="position: relative">
    <HeaderPage />
    <div class="content">
      <div class="courseContent">
        <div style="color: #ee3322; margin: 0 0 15px; font-size: 14px">
          {{ this.class.className }}
        </div>

        <div v-if="workList.length === 0">
          <el-empty description="作业列表为空"></el-empty>
        </div>

        <div v-else>
          <table style="width: 100%; border-collapse: collapse">
            <colgroup>
              <col style="width: 340px" />
              <col style="width: 240px" />
              <col style="width: 180px" />
              <col style="width: 300px" />
            </colgroup>
            <tr v-for="(item, index) in workList" :key="index">
              <td>
                <div style="color: #353535; font: bold 18px '微软雅黑'">
                  {{ item.title }}
                </div>
              </td>
              <td style="font-size: 12px; color: #808080">
                <div style="padding: 5px">发布时间：{{ item.createTime }}</div>
                <div style="padding: 5px">截止时间：{{ item.upToTime }}</div>
              </td>
              <td style="font-size: 12px; color: #808080">
                <!-- <span>
                    批改时间：2024-11-20
                </span> -->
              </td>
              <td style="text-align: end">
                <button
                  @click="goSubmit(item.id)"
                  class="btn"
                  style="
                    background-color: red;
                    color: white;
                    border: 1px solid #ccc;
                    border-radius: 3px;
                    padding: 5px 10px;
                    line-height: 1.5;
                    font-size: 12px;
                  "
                >
                  提交
                </button>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderPage from "@/components/HeaderPage.vue";
import { getWorksAndClass } from "@/api/work";
export default {
  data() {
    return {
      courseId: "",
      workList: [],
      class: {},
    };
  },
  components: {
    HeaderPage,
  },
  mounted() {
    this.courseId = this.$route.query.courseId;
    this.getList();
  },
  methods: {
    // 查询班级和作业列表
    getList() {
      getWorksAndClass(this.courseId)
        .then((res) => {
          this.workList = res.works;
          this.class = res.class;
        })
        .catch(() => {});
    },
    // 跳转到提交作业页面
    goSubmit(workId) {
      this.$router.push({
        path: `/submitWork`,
        query: { workId: workId, courseId: this.courseId },
      });
    },
  },
};
</script>

<style scoped>
.content {
  background-image: url("../../assets/images/home-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 900px;
  position: fixed;
  width: 100%;
  left: 0;
  top: 80px;
  overflow: auto;
}

.courseContent {
  padding: 20px;
  width: 80%;
  background-color: white;
  margin: 60px auto;
  border-radius: 10px;
}
.course:hover {
  cursor: pointer;
}

td {
  border-bottom: 1px solid #ddd;
  padding: 20px;
}

tr:last-child td {
  border-bottom: none;
}
.btn:hover {
  cursor: pointer;
}
</style>
